<template>
  <div class="bg">
    <div class="login">
      <div class="login-bg"></div>
      <div class="login-body">
        <div class="login-title">教师登录</div>
        <Form ref="formInline" :model="formInline" :rules="ruleInline" class="login-form">
          <FormItem prop="user" class="userbody">
            <Input   size="large" clearable  type="text" v-model="formInline.user" placeholder="请输入用户名">
              <i id="pre" class="iconfont icon-yonghuming" slot="prefix"></i>
            </Input>
          </FormItem>
          <FormItem prop="password">
            <Input  size="large" clearable  type="password" v-model="formInline.password" placeholder="请输入密码">
              <i class="iconfont icon-mima" slot="prefix"/>
            </Input>
          </FormItem>
          <FormItem>
            <div class="ivu-form-item-content">
              <label>
                <Checkbox class="remember">记住我</Checkbox>
              </label>
            </div>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')" class="loginbtn">登录</Button>
          </FormItem>
          <FormItem>
            <div class="ivu-form-item-content">
              <label>
                <Checkbox class="ty">我已同意《伯乐码用户服务协议》</Checkbox>
              </label>
            </div>
          </FormItem>
          <FormItem>
            <div class="login-footer">
              <span>推荐浏览器：</span>
              <a href="https://www.google.cn/chrome/">
                <i class="iconfont icon-iconset0284"></i>谷歌
              </a>
              <a href="http://www.firefox.com.cn/">
                <i class="iconfont icon-huohu"></i>火狐
              </a>
            </div>
          </FormItem>
        </Form>
      </div>
    </div>
    <div class="version">版权所有 © 2016-2020 上海践升信息科技有限公司 沪ICP备19006290号-3</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formInline: {
        user: '',
        password: ''
      },
      ruleInline: {
        user: [{ required: true, message: '请输入用户名', trigger: 'change' }],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { type: 'string', min: 6, message: '密码不能少于6位数字和英文的组合', trigger: 'change' }
        ]
      }
    }
  },
  components: {
  },
  mounted () {
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('登录成功!')
        }
      })
    }
  }
}
</script>

<style scoped="scoped"  lang="scss">

  .bg {
    width: 100%;
    height: 100%;
    background-image: url('https://cdn.51bolema.com/img/bolema_teacher_login_background_img_1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .login {
      width: 743.75px;
      height: 397.25px;
      border: 1px;
      border-radius: 19px;
      display: flex;
      background-color: #fff;
      margin-top: -190px;
      margin-left: -375px;
      padding: 25px;
      position: absolute;
      left: 50%;
      top: 50%;
      box-shadow: 0 0 5px rgba(0,0,0,0.2);

      .login-bg {
        width: 50%;
        height: 100%;
        background-image: url('https://cdn.51bolema.com/img/bolema_class_default.jpg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border-radius: 19px;
        box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.15);
      }

      .login-body {
        width: 44%;
        height: 100%;
        margin-left: 4%;
        align-items: center;
        flex-direction: column;
        display: flex;

        .login-title {
          color: #2d8cf0;
          font-size: 21px;
        }

        .login-form {
          width: 100%;
          height: auto;

          .iconfont {
            margin-left: 10px;
            margin-right: 5px;
            color: #2d8cf0;
            font-size: 20px;
          }

          .userbody {
            margin-top: 27px;

          }

          .remember {
            font-size: 13px;
          }
          .loginbtn {
            width: 100%;
            height: 40px;
            border-radius: 25px;
            position: absolute;
            top: -10px;
          }
          .ty{
            margin-top: 5px;
            font-size: 13px;
          }
          .login-footer {
            position: absolute;
            top: -10px;

            i {
              color: #2d8cf0;
            }
          }
        }
      }
    }

    .version {
      color: #FFFFFF;
      font-size: 12px;
      position: fixed;
      bottom: 0px;
      left: 50%;
      margin-left: -200px;
    }
  }
</style>
